<template>
  <li
    class="contact-item"
    :class="`contact-item-type--${_type}`">
    <span class="contact-item__title">{{ title }}</span>

    <p class="contact-item-content">
      <slot></slot>
    </p>

  </li>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
    },
    _type: {
      type: String,
      default: "qq"
    },
  },
}
</script>
<style lang="scss" scoped>
  .contact-item {
    display: inline-block;
    width: 200px;
    height: 414px;
    margin-right: 24px;
    font-size: 16px;
    color: #fff;
    vertical-align: middle;
    background-repeat: no-repeat;

    &__title {
      display: block;
      padding: 110px 0 50px;
      text-align: center;
    }

    &-content {

    }
    &-type {
      &--qq {
        background-image: url('~/assets/images/kefu_qq.png');
      }
      &--wechat {
        background-image: url('~/assets/images/kefu_wechat.png');
      }
      &--kefu {
        background-image: url('~/assets/images/kefu_hotline.png')
      }
    }
  }
</style>
